<template>

  <div class="login">
    <div class="adminlogin" align="center">
      <h4>管理员登录</h4>
      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="60px"
          label-position="right"
      >
        <el-form-item label="adminId:" prop="adminId" style="margin-top: 10px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="adminId"
                  type="text"
                  placeholder="请输入adminId"
                  v-model="loginForm.adminId"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="password" prop="password">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="password"
                  type="password"
                  placeholder="请输入密码"
                  v-model="loginForm.password"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="submitLogin" color="whrite"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>

import request from "@/utils/request";
import router from "@/router";

export default {

  name: "AdminLoginView",

  components: {
    request
  },

  // 数据
  data(){
    return {
      loginForm: {
        adminId: '',
        password: '',
      },
      loginRules: {
        adminId: [{ required: true, message: "请输入管理员id", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      }
    }
  },

//  方法
  methods:{
    submitLogin(){
      request.post("/security/administratorLogin/",this.loginForm).then(res=>{
        console.log(res.data)
        if (res.data==500){
          alert("请重新登录！")
          router.push("/AdminLoginView")
        }else {
          alert("登录成功！")
          router.push("/AdminArticleView")
        }
      })

    },
  }
}
</script>

<style>
.login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  background-color: #242645;
  /*background-image: url("~@/assets/images/index.jpg");*/
  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
}

.adminlogin {
  width: 300px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
  );
}

.inps input {
  border: none;
  color: midnightblue;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 200px;
}
</style>